import { Button, Card, Space } from 'antd'
import { useNavigate } from 'react-router-dom'
import { axiosInstance } from '@/hooks/useAxios'

function ErrorTest() {
  const navigate = useNavigate()

  // 触发组件错误
  const triggerComponentError = () => {
    throw new Error('这是一个测试错误！')
  }

  // 触发 404 错误
  const trigger404 = () => {
    navigate('/this-page-does-not-exist')
  }

  // 触发 API 404
  const triggerApi404 = async () => {
    try {
      await axiosInstance.get('/api/not-found-endpoint')
    } catch (error) {
      console.error('API 404 error:', error)
    }
  }

  // 触发 API 500
  const triggerApi500 = async () => {
    try {
      await axiosInstance.get('/api/trigger-500-error')
    } catch (error) {
      console.error('API 500 error:', error)
    }
  }

  // 触发 API 403
  const triggerApi403 = async () => {
    try {
      await axiosInstance.get('/api/forbidden')
    } catch (error) {
      console.error('API 403 error:', error)
    }
  }

  return (
    <Card title="错误页面测试" style={{ margin: 24 }}>
      <Space direction="vertical" size="large" style={{ width: '100%' }}>
        <div>
          <h3>组件错误测试</h3>
          <Button danger onClick={triggerComponentError}>
            触发组件错误（ErrorBoundary）
          </Button>
        </div>

        <div>
          <h3>路由错误测试</h3>
          <Button onClick={trigger404}>
            访问不存在的页面（404）
          </Button>
        </div>

        <div>
          <h3>API 错误测试</h3>
          <Space>
            <Button onClick={triggerApi404}>
              触发 API 404
            </Button>
            <Button onClick={triggerApi403}>
              触发 API 403
            </Button>
            <Button onClick={triggerApi500}>
              触发 API 500
            </Button>
          </Space>
        </div>

        <div>
          <h3>直接访问错误页面</h3>
          <Space>
            <Button onClick={() => navigate('/404')}>
              访问 404 页面
            </Button>
            <Button onClick={() => navigate('/500')}>
              访问 500 页面
            </Button>
            <Button onClick={() => navigate('/error?code=403')}>
              访问 403 页面
            </Button>
          </Space>
        </div>
      </Space>
    </Card>
  )
}

export default ErrorTest